<template>
  <div class="operational_people_detail_page">
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        基础信息
      </div>
      <div class="content">
        <div class="msg_box">
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">姓名：</div>
                <div class="value">{{ detailObj.contactName }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件类型：</div>
                <div class="value">{{ detailObj.contactType }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">身份证号：</div>
                <div class="value">{{  detailObj.contactId }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">性别：</div>
                <div class="value">{{ detailObj.contactSex }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">民族：</div>
                <div class="value">{{ detailObj.contactEthnic }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">签发机关：</div>
                <div class="value">{{ detailObj.contactIssuing }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">出生日期：</div>
                <div class="value">{{ detailObj.contactBirth }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件起始日期：</div>
                <div class="value">{{ detailObj.contactCardStart }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">证件到期日期：</div>
                <div class="value">
                  {{ detailObj.contactCardEnd === '1' ? '' : detailObj.contactCardEnd }}
                  <el-checkbox
                    v-if="detailObj.contactCardEnd === '1' "
                    :disabled="true"
                    :value="true"
                    class="long_effect"
                  >长期有效</el-checkbox>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">户籍地址：</div>
                <div class="value">{{ detailObj.contactAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">手机号码：</div>
                <div class="value">{{ detailObj.contactPhone }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">邮箱：</div>
                <div class="value">{{ detailObj.contactEmail }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div class="msg_line">
                <div class="key">运营人员状态：</div>
                <div class="value color_green">{{ statusFilter(detailObj.status) }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        分配权限
      </div>
      <div class="content">
        <div class="msg_box">
          <el-row class="row">
            <div class="msg_line">
                <div class="key">数信易链：</div>
                <div class="value">
                  <el-checkbox-group v-model="detailObj.privilegeYl" :disabled="true">
                    <el-checkbox
                      v-for="item in permissionList"
                      :key="item.label"
                      :label="item.value"
                    >{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
          </el-row>
          <el-row class="row">
            <div class="msg_line">
                <div class="key">数信易融：</div>
                <div class="value">
                  <el-checkbox-group v-model="detailObj.privilegeYr" :disabled="true">
                    <el-checkbox
                      v-for="item in permissionList"
                      :key="item.label"
                      :label="item.value"
                    >{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
          </el-row>
        </div>
      </div>
    </div>
    <div class="mod">
      <div class="title">
        <i class="icon"></i>
        附件信息
      </div>
      <div class="content">
        <div class="img_list">
          <div class="img_item">
            <div class="img_box ID">
              <img :src="baseURL + detailObj.contactRPic" alt="" class="img">
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.contactRPic)"></i>
              </div>
            </div>
            <div class="text">身份证人像面</div>
          </div>
          <div class="img_item">
            <div class="img_box ID">
              <img :src="baseURL + detailObj.contactBPic" alt="" class="img">
              <div class="mask">
                <i class="el-icon-search" @click.stop="previewBigImg(detailObj.contactBPic)"></i>
              </div>
            </div>
            <div class="text">身份证国徽面</div>
          </div>
        </div>
      </div>
    </div>
    <CustomDialog
      title="查看内容"
      width="70%"
      :visible="dialogVisible"
      @close="dialogVisible = false;previewBigImgUrl = '';"
    >
      <div class="mask_dialog_content">
        <div class="img_box">
          <img :src="baseURL + previewBigImgUrl" alt="" class="img" />
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import { operationDetail } from '@/api/companyManage'
import CustomDialog from '@/customComponents/dialog'

export default {
  components: {
    CustomDialog,
  },
  data() {
    return {
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :
        process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      // longEffective: true,
      permissionList: [
        {
          label: '初审',
          value: '10',
        },
        {
          label: '复审',
          value: '20',
        },
        {
          label: '查看',
          value: '30',
        }
      ],
      statusList: [],
      detailObj: {},
      userId: '',
      previewBigImgUrl: "", // 预览图
      dialogVisible: false, // 预览图
    }
  },
  mounted() {
    this.getOperationStatus().then(() => {
      if (this.$route.query.userId) {
        this.userId = this.$route.query.userId
        this.getOperationDetail()
      }
    })
  },
  methods: {
    // 获取运人员状态
    getOperationStatus() {
      return new Promise((resolve, reject) => {
        this.getDicts('operationstatus').then((res) => {
          this.statusList = res.data
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    getOperationDetail() {
      operationDetail(this.userId).then((res) => {
        res.data.privilegeYl = res.data.privilegeYl.split(',') || []
        res.data.privilegeYr = res.data.privilegeYr.split(',') || []
        this.detailObj = res.data
      })
    },
    statusFilter(val) {
      const item = this.statusList.find((item) => val === item.dictValue)
      if (item) {
        return item.dictLabel
      }
    },
    // 预览上传的大图
    previewBigImg(imgUrl) {
      this.previewBigImgUrl = imgUrl;
      this.dialogVisible = true;
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.operational_people_detail_page {
  .mod {
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    background-color: #fff;
    margin-bottom: 16px;
    padding-top: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      padding-left: 16px;
      .icon {
        display: block;
        width: 3px;
        height: 16px;
        background-color: $theme;
        margin-right: 5px;
      }
    }
    .content {
      padding: 40px;
      .msg_box {
        margin-top: 40px;
        .row {
          margin-bottom: 38px;
          &:last-child {
            margin-bottom: 0;
          }
          .msg_line {
            display: flex;
            align-items: center;
            .key {
              width: 206px;
              height: 14px;
              color: #777;
              font-size: 14px;
              text-align: right;
              flex-shrink: 0;
            }
            .value {
              flex: 1 1 auto;
              color: #333;
              font-size: 14px;
              &.color_green {
                color: #67C23A;
              }
            }
          }
        }
      }
      .img_list {
        display: flex;
        align-items: center;
        .img_item {
          margin-right: 40px;
          .img_box {
            width: 262px;
            height: 165px;
            position: relative;
            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .mask {
              display: none;
            }
            &:hover {
              .mask {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 30px;
                font-weight: 600;
              }
            }
          }
          .text {
            color: #333;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
